<template>
    <view class="container">
        <view class="content">
            <view class="input-group">
                <view class="input-row border">
                    <text class="title">邮箱：</text>
                    <m-input class="m-input" type="text" clearable focus v-model="email" placeholder="请输入邮箱"></m-input>
                </view>
                <view class="input-row">
                    <text class="title">密码：</text>
                    <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
                </view>
            </view>
            <view class="btn-row">
                <button type="primary" class="primary" @tap="bindLogin">登录</button>
            </view>
            <view class="action-row">
				<navigator url="../login/phone">手机登录</navigator>
				<text>|</text>
                <navigator url="../reg/reg">注册账号</navigator>
                <text>|</text>
                <navigator url="../pwd/pwd">忘记密码</navigator>
            </view>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
	import network from '../../common/network.js';
	import validator from '../../common/validator.js';
	import sha1 from 'crypto-js/sha1.js'

    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'

    export default {
        components: {
            mInput
        },
        data() {
            return {
                providerList: [],
                hasProvider: false,
                email: '',
                password: '',
                positionTop: 0
            }
        },
        methods: {
            ...mapMutations(['login', 'setUserInfo']),
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
            bindLogin() {
                if (!validator.isValidEmail(this.email) || !validator.isValidPassword(this.password)) {
					return
				}

                const self = this;
                // 登录
                network.request("/sessions/", 'POST',
                    {
                        "email": this.email,
                        "password": sha1(this.password).toString()
                    },
                    function(res) { // 登录成功后，获取用户信息
                        console.log("登录成功后:" + JSON.stringify(res));
                        const id = res.id;
						const token = res.token;
                        network.requestWithHeader('/api/frontend/users/'+res.id, 'GET', {'X-Token': token},
                            {},
                            function(res) {
								console.log("获取用户信息后:" + JSON.stringify(res));
                                res.id = id;
                                res.token = token;
								self.toMain(res);
                            });
                    });
            },
			toMain(user) {
				this.login(user.username);
				this.setUserInfo(user);
				//service.addUser()
				
				uni.reLaunch({
					url: '../home/main'
				})
			}
        },
        onReady() {
            this.initPosition();
        }
    }
</script>

<style>
@import '../../common/custom.css';

</style>
